<template>
    <div class="tag-container">
        <!-- 查询表单 -->
        <div class="query-form-container">
            <el-form :inline="true" :model="queryInputModel" label-width="80px">
                <el-form-item label="菜单名称:" prop="name">
                    <el-input v-model="queryInputModel.name" placeholder="菜单名称" clearable
                        style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型:" prop="menuType">
                    <dictselection v-model="queryInputModel.menuType" clearable style="width: 150px"
                        classCode="system:MenuType" :dictData="menuTypeDic">
                    </dictselection>
                </el-form-item>
                <el-form-item label="是否启用:" prop="status">
                    <dictselection v-model="queryInputModel.status" clearable style="width: 150px"
                        classCode="system:Status" :dictData="statsDic">
                    </dictselection>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  icon="Search" @click="refreshHander">
                        查询
                    </el-button>
                    <el-button icon="Delete" @click="ResetQueryInputHandler">
                        清空
                    </el-button>
                </el-form-item>
            </el-form>
        </div>



        <!-- 表格 -->
        <div class="table-container">
            <!-- 操作按钮 -->
            <div class="action-button-container">
                <el-row :gutter="5">
                    <el-col :span="1.5">
                        <el-button size="small" icon="Refresh" type="primary" plain @click="refreshHander"> 刷新
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button size="small" icon="Plus" type="primary" plain @click="addMenuHandler"> 增加
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button size="small" icon="Download" type="warning" plain> 导出 </el-button>
                    </el-col>
                </el-row>
            </div>


            <el-table :data="menuTreeData" row-key="id" border default-expand-all
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column type="index" label="序号" width="60" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="name" label="名称" header-align="center" :show-overflow-tooltip="true"
                    width="200px"></el-table-column>
                <el-table-column prop="menuType" label="类型" header-align="center" align="center"
                    :show-overflow-tooltip="true" width="80px">
                    <template #default="scope">
                        <dictTag :dictcode="scope.row.menuType" :dictmap="menuTypeDic"></dictTag>
                    </template>
                </el-table-column>
                <el-table-column prop="icon" label="图标" header-align="center" align="center"
                    :show-overflow-tooltip="true" width="60px">
                    <template #default="scope">
                        <el-icon v-if="scope.row.icon">
                            <component :is="scope.row.icon" />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="routeName" header-align="center" align="center" label="路由名称"
                    :show-overflow-tooltip="true" width="120px"></el-table-column>
                <el-table-column prop="targetRoute" header-align="center" label="目标路由" :show-overflow-tooltip="true"
                    width="200px"></el-table-column>
                <el-table-column prop="permissionMark" header-align="center" label="权限标识" :show-overflow-tooltip="true"
                    width="120px"></el-table-column>
                <el-table-column prop="sort" label="排序" align="center" header-align="center"
                    :show-overflow-tooltip="true" width="60px"></el-table-column>
                <el-table-column prop="status" label="状态" width="70px">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                            @change="handleSwitchChange(row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button link  size="small" icon="Edit" @click="updateMenuHandler(row)">编辑</el-button>
                        <el-button link size="small" icon="Delete" type="danger" @click="delMenuHandler(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 新增/编辑菜单对话框 -->
        <el-dialog v-model="form.open" :title="form.title" width="600px" append-to-body center>
            <el-form ref="MenuFormRef" :model="form.data" :rules="form.rules" label-width="auto">
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="form.data.name"></el-input>
                </el-form-item>
                <el-form-item label="父菜单 ID" prop="parentId">
                    <el-tree-select v-model="form.data.parentId" :data="menuTreeData"
                        :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id"
                        placeholder="选择上级菜单" clearable check-strictly />
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <dictselection v-model="form.data.menuType" :dictData="menuTypeDic" classCode="System:MenuType">
                    </dictselection>
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <icon-picker v-model="form.data.icon" icon-size="32px" icon-color="#409EFF" />
                </el-form-item>
                <el-form-item label="目标路由" prop="targetRoute">
                    <el-input v-model="form.data.targetRoute"></el-input>
                </el-form-item>
                <el-form-item label="路由名称" prop="routeName">
                    <el-input v-model="form.data.routeName"></el-input>
                </el-form-item>
                <el-form-item label="权限标识" prop="permissionMark">
                    <template #label>
                        <span>
                            <el-tooltip content="访问的数据权限代码标识：请保持唯一" placement="top">
                                <el-icon><question-filled /></el-icon>
                            </el-tooltip>
                            权限标识
                        </span>
                    </template>
                    <el-input v-model="form.data.permissionMark"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="form.data.sort"></el-input-number>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <dictselection v-model="form.data.status" classCode="system:Status" :dictData="statsDic">
                    </dictselection>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="form.open = false">取消</el-button>
                <el-button type="primary" @click="SubmitForm">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import msgHelper from '@/util/msgHelper.js'
import { onMounted, ref } from 'vue'
import dictselection from '@/components/DictExtend/DictSelectionWithData.vue';
import dictApi from "@/api/system/dict.js"
import menuApi from "@/api/system/menu.js"
import dictTag from '@/components/DictExtend/DictDataTagForTableItem.vue';
import IconPicker from '@/components/IconHelper/IconPicker.vue';
const { proxy } = getCurrentInstance();

const menuTreeData = ref([]);
const statsDic = ref([]);
const menuTypeDic = ref([]);

onMounted(async () => {

    nextTick(async () => {
        const Sres = await dictApi.getDataByCode("System:Status");
        if (Sres.data && Sres.data.data) {
            statsDic.value = Sres.data.data;
        }

        const Mres = await dictApi.getDataByCode("System:MenuType");
        if (Mres.data && Mres.data.data) {
            menuTypeDic.value = Mres.data.data;
        }
    });
});

let queryInputModel = ref({
    name: undefined,
    menuType: null,
    status: null
});

let form = ref({
    title: "sys",
    open: false,
    data: {
        id: undefined,
        name: '',
        parentId: null,
        menuType: 0,
        icon: '',
        targetRoute: '',
        routeName: '',
        permissionMark: '',
        sort: 1,
        status: 1
    },
    rules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        permissionMark: [{ required: true, message: "请输入唯一标识", trigger: "blur" }],
        menuType: [{ required: true, message: "类型", trigger: "blur" }]
    }
});

const reSetForm = () => {
    form.value.data = {
        id: undefined,
        name: '',
        parentId: null,
        menuType: 0,
        icon: '',
        targetRoute: '',
        routeName: '',
        permissionMark: '',
        sort: 1,
        status: 1
    };
}

const refreshHander = () => {
    menuApi.getTreeMenu(queryInputModel.value)
        .then(res => {
            menuTreeData.value = res.data.data;
        })
        .catch(res => {
            msgHelper.showError("加载数据失败");
        });
};

// 新增菜单
const addMenuHandler = () => {
    reSetForm();
    form.value.title = "新增菜单";
    form.value.open = true;
}

//
const updateMenuHandler = (row) => {
    reSetForm();
    menuApi.getMenuById({ id: row.id }).then(res => {
        if ( res.data.success) {
            form.value.data = res.data.data;
            form.value.open = true;
            form.value.title = "编辑菜单";
        }
        else {
            msgHelper.show("获取数据失败" + res.data.msg);
        }
    })

}

const SubmitForm = () => {
    proxy.$refs.MenuFormRef.validate((valid) => {
        if (valid) {
            if (form.value.data.id) {
                //update handler;
                menuApi.updateMenu(form.value.data).then(res => {
                    if (res.data.success) {
                        refreshHander();
                        form.value.open = false;
                        msgHelper.show("更新成功");
                    }
                    else {
                        msgHelper.show("更新失败" + res.data.msg);
                    }
                })
            }
            else {
                //add handler;
                menuApi.addMenu(form.value.data).then(res => {
                    if (res.data.success) {
                        refreshHander();
                        form.value.open = false;
                        msgHelper.show("添加成功");
                    }
                    else {
                        msgHelper.show("添加失败" + res.data.msg);
                    }
                })
            }
        }
        else {
            msgHelper.showErro("请验证填写信息!");
        }
    });
}

function ResetQueryInputHandler() {
    queryInputModel.value = {
        name: undefined,
        menuType: null,
        status: null
    };
}
function delMenuHandler(row) {
    if (row.id) {
        menuApi.delMenu({ id: row.id, version: row.version }).then(res => {
            if ( res.data.success) {
                refreshHander();
                msgHelper.show("删除成功");
            }
            else {
                msgHelper.show("删除失败" + res.data.msg);
            }
        })
    }
    else {
        msgHelper.show("删除失败,未找到数据");
    }
}

const handleSwitchChange = async (row) => {
    await menuApi.setStatus({ id: row.id, status: row.status, version: row.version })
        .then(res => {
            if ( res.data.success) {
                msgHelper.show('更新成功');
                refreshHander();
            }
            else {
                msgHelper.showError('更新失败');
            }
        })
        .catch(error => {
            msgHelper.showError('更新失败');
        });
}
</script>

<style scoped></style>